<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        li {
            list-style: none;
        }
        
        a {
            color: white;
            text-decoration: none;
        }
        
        header {
            width: 100%;
            height: 100px;
            display: flex;
            background-color: transparent;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        header .items1 {
            width: 100%;
            height: 25px;
            display: flex;
            justify-content: space-between;
            background-color: gray;
            border-bottom: 1px solid black;
            align-items: center;
        }
        
        header .items1 .left {
            display: flex;
            margin-right: 10px;
            font-size: 12px;
        }
        
        header .items1 .right {
            display: flex;
            margin-left: 10px;
            font-size: 12px;
        }
        
        header .items2 {
            width: 100%;
            height: 50px;
            display: flex;
            background-color: lightyellow;
            justify-content: center;
            border-bottom: 1px solid lightgrey;
        }
        
        header .items2 p {
            display: flex;
            width: 100px;
            height: 30px;
            font-size: 24px;
            color: black;
        }
        
        header .items2 input {
            display: flex;
            width: 150px;
            height: 30px;
        }
        
        header .items2 button {
            width: 30px;
            height: 30px;
            background-color: grey;
        }
        
        header .items3 {
            width: 100%;
            height: 25px;
            display: flex;
            justify-content: space-between;
            background-color: lightyellow;
            border-bottom: 1px solid lightgrey;
            align-items: center;
        }
        
        header .items3 ul {
            display: flex;
            margin-left: 100px;
        }
        
        header .items3 ul a {
            color: black;
            margin-left: 15px;
        }
        
        header .items3 ul a:hover {
            color: white;
            background-color: pink;
        }
    </style>
</head>




<body>
    <header>
        <div class="items1">
            <ul class="left">
                <li><a href="#" class="left">豆瓣</a></li>
                <li><a href="#" class="left">读书</a></li>
                <li><a href="#" class="left">电影</a></li>
                <li><a href="#" class="left">音乐</a></li>
                <li><a href="#" class="left">同城</a></li>
                <li><a href="#" class="left">小组</a></li>
                <li><a href="#" class="left">阅读</a></li>
                <li><a href="#" class="left">FM</a></li>
                <li><a href="#" class="left">时间</a></li>
                <li><a href="#" class="left">豆品</a></li>
            </ul>

            <ul class="right">
                <li><a href="#" class="right">下载</a></li>
                <li><a href="#" class="right">登录</a></li>
                <li><a href="#" class="right">注册</a></li>
            </ul>
        </div>



        <div class="items2">
            <p class="logo">豆瓣读书</p>
            <input type="text" placeholder="书名，作者，ISBN">
            <button type="submit">🔍</button>
        </div>


        <div class="items3">
            <ul>
                <li><a href="#">购物单</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">年度榜单</a></li>
                <li><a href="#">年度报告</a></li>

            </ul>
        </div>
    </header>
    <main>
        <div class="img">
            <img src="" alt="">
        </div>
    </main>



</body>

</html>